<template>
  <div class="infoTable-containner">
    <div class="tableSearch">
      <el-form :inline="true" class="demo-form-inline clearfix" size="mini">
        <el-form-item label="实时告警列表">
        </el-form-item>
        <el-form-item label="告警级别:" class="checkBoxTitle" style="font-weight: normal">
          <el-checkbox-group class="checkBoxCheck" v-model="checkedAlarms">
            <el-checkbox v-for="level in alarmLevel" :label="level" :key="level">{{level}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="info" @click="deleteAlarm()">告警消除</el-button>
          <!--<el-button type="primary" @click.native.prevent="confirmDialog()">告警确认</el-button>-->
        </el-form-item>
      </el-form>
    </div>
    <div class="tableList">
      <el-table
        :data="tableData"
        border
        stripe border fit highlight-current-row
        style="width: 100%; max-height:667px; overflow-y: auto "
        @select="toggleRowSelection"
        @select-all="toggleRowSelectionAll"
        :height='667'
        :default-sort = "{prop: 'time_alarm', order: 'descending'}"
        :header-cell-style="{background:'#D8DEE8'}"
      >
        <el-table-column
          type="selection"
          align="center"
          width="60px"
        >
        </el-table-column>
        <el-table-column
          v-for="(column, index) in cols"
          :prop="column.prop"
          :label="column.label"
          :key="index"
          :width="column.width"
          :sortable="column.sortable"
        >
        </el-table-column>
        <el-table-column label="级别" width="62px" prop="event_level"></el-table-column>
        <el-table-column
          v-for="(column, index) in cols2"
          :prop="column.prop"
          :label="column.label"
          :key="index+5"
          :width="column.width"
          :sortable="column.sortable"
        >
        </el-table-column>
      </el-table>
    </div>
    <confirm-alarm v-bind:userRow="userRow" v-if="confirmAlarmDialogShow" @giveFalse="confirmReturn"></confirm-alarm>
    <orgdelete></orgdelete>
  </div>
</template>
<script>
  import axios from 'axios'
  import orgdelete from '@/views/managementSide/mSiteAdmin/components/delete'
  import confirmAlarm from './confirmAlarm.vue'

  const levelOptions = ['故障-停机', '故障-重要', '故障-一般', '告警-重要', '告警-一般', '事件']
  export default {
    components: {
      orgdelete,
      confirmAlarm
    },
    data() {
      return {
        cols: [
          { prop: 'station', label: '站点名称', width: '182px', sortable: true },
          { prop: 'object', label: '设备名称', width: '180px' },
          { prop: 'event_type', label: '类型', width: '70px' },
          { prop: 'attri', label: '测点名称', width: '191px' },
          { prop: 'content', label: '事件描述', width: '334px', sortable: true }
        ],
        cols2: [
          { prop: 'time_alarm', label: '告警时间', width: '186px' },
          { prop: '', label: '附加信息' }
          //          { prop: 'user_name', label: '确认时间', width: '172px' },
          //          { prop: 'user_name', label: '确认人', width: '82px' },
          //          { prop: 'send_status', label: '确认内容' }
        ],
        tableData: [],
        checkedAlarms: [],
        alarmLevel: levelOptions,
        // 父组件传参
        userRow: '',
        // 告警确认弹窗
        confirmAlarmDialogShow: false,
        // 获取告警id
        rowPid: [],
        // 告警消除
        alarmDel: {
          access_token: localStorage.getItem('access_token'),
          type: 'event_clear',
          data: {
            condition: {
              ids: []
            }
          }
        }
      }
    },
    mounted() {
      this.wsAlarm()
      console.log(this.$route.path)
    },
    methods: {
      // 以下为告警确认调用方法
      // 父传值
      confirmDialog(userRow) {
        this.userRow = this.rowPid
        this.confirmAlarmDialogShow = !this.confirmAlarmDialogShow
      },
      // 父接收值
      confirmReturn(data) {
        this.confirmAlarmDialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        console.log(data)
      },
      // 告警消除
      deleteAlarm() {
        this.$confirm('确认删除选中的告警？', '提示', {
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.alarmDel.data.condition.ids = this.rowPid
          axios.post('/event', this.alarmDel, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            console.log(res)
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          })
            .catch((error) => {
              console.log(error)
              this.$message({
                type: 'error',
                message: error.data.errmsg
              })
            })
          this.wsAlarm()
        }).catch(() => {
        })
      },
      // 选择设备
      toggleRowSelection(row) {
        var pidArr = []
        for (var i = 0; i < row.length; i++) {
          var rowpid = row[i].id
          pidArr.push(rowpid)
        }
        this.rowPid = pidArr
        console.log(this.rowPid)
        console.log(row)
      },
      toggleRowSelectionAll(row) {
        console.log(row)
      },
      // 实时请求
      wsAlarm() {
        // var arr = []
        var firstArry = []
        let web = process.env.SERVER_URL_WS_SERVICE
        console.log(web)
        var ws = new WebSocket(web + '/ws')
        ws.onopen = function() {
          console.log('连接成功')
          var datajson = JSON.stringify({
            access_token: '',
            type: 'ws_first_rids',
            rids: [localStorage.getItem('num')]
          })
          ws.send(datajson)
        }
        ws.onmessage = (e) => {
          var data = JSON.parse(e.data)
          if (data.errcode === '00001') {
            for (var i = 0; i < data.datas.length; i++) {
              firstArry.push(data.datas[i])
              console.log(firstArry)
            }
          } else if (data.datas !== []) {
            var xArry = {}
            xArry = data.datas[0]
            console.log(data.datas)
            console.log(xArry)
            if (xArry !== undefined) {
              for (let j = 0; j < firstArry.length; j++) {
                var theID = firstArry[j].id
                if (xArry.id === firstArry[j].id) {
                  firstArry[j] = xArry
                  // firstArry.add(firstArry[j])
                  console.log(firstArry[j])
                  console.log(firstArry)
                }
              }
              if (xArry.id !== theID) {
                firstArry.push(xArry)
              }
            }
          }
          firstArry = firstArry.filter((v) => {
            return v.event_level !== '0'
          })
          this.tableData = [...firstArry]
          if (this.$route.path !== '/message/event') {
            // alert('关闭成功')
            ws.close()
          }
        }
        ws.onclose = (e) => {
          console.log(e)
        }
        //        ws.onclose = function(e) { // e为关闭的原因
        //          console.log(this.$route.params)
        //          console.log(e)
        //          if (this.$route.path !== '/message/event') {
        //            alert('关闭成功')
        //            ws.onclose
        //          }
        //        }
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /***************清除浮动******************/
  .clearfix:after {
    content: '';
    display: block;
    clear: both;
  }

  .infoTable-containner {
    width: 100%;
    min-height: 500px;
    .tableSearch {
      width: 100%;
      height: 50px;
      background-color: #F0F3F5;
      font-size: 14px;
      font-weight: 400;
      color: rgba(105, 114, 126, 1);
      line-height: 20px;
      padding: 15px 20px 0 20px;
      .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
        /*padding-top: 10px;*/
      }

    }
    .tableList {
      width: 100%;
      min-height: 20vw;
    }
    .footerPage {
      float: right;
      right: 20px;
      position: relative;
    }

  }

  /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #FAFAFA;
  }

  /deep/ .el-form--inline .el-form-item__content {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/ .el-form--inline .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
  }

  /deep/ .el-table--border th, .el-table__fixed-right-patch {
    padding: 3px 0;
  }

  /deep/ .checkBoxTitle > label.el-form-item__label {
    padding-left: 40px;
    color: #323842;
    font-weight: normal;
  }

  /deep/ .checkBoxCheck > .el-checkbox {
    top: 2px;
  }

  /deep/ .checkBoxCheck > .el-checkbox + .el-checkbox {
    margin-left: 15px;
  }
</style>
